<template>
	<div>
		<Nav activeIndex=""></Nav>
		<div class="articleinfo">
			<h1 v-html="content.name"></h1>
			<div class="authorinfo">作者：<p v-html="content.username"></p>
				创建时间：<p>{{parseTimeNew(content.create_time)}}</p>
			</div>
			<editor style="width: 80%;margin:0px auto ;" v-if="content.content.length>0" :value="content.content"
				:enable="false"></editor>
			<dis-list :discuss="dis" :dis="disinfo" :reply="reply"></dis-list>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import Nav from '../components/Nav.vue'
	import Footer from '../components/Footer.vue'
	import editor from "./editor.vue";
	import disList from "./dislist.vue";
	export default {
		name: "articlrContent",
		data() {
			return {
				content: {
					content: "",
					create_time: "",
					name: "",
					username: ""
				},
				dis: [],
				disinfo: {
					id: "",
					userid: "",
					con_dis: "",
					article_id: ""
				},
				reply: {
					id: "",
					userid: "",
					reply_con: "",
					reply_id: "",
					dis_id: "",
					article_id: ""
				}
			}
		},
		components: {
			disList,
			editor,
			Nav,
			Footer
		},
		computed: {
			...mapState(['userinfo']),
		},
		methods: {
			parseTimeNew(date) {
				var ndate = new Date(date)
				let type = 'yyyy-MM-dd hh:mm:ss'
				const o = {
					'M+': ndate.getMonth() + 1, // 月份
					'd+': ndate.getDate(), // 日
					'h+': ndate.getHours(), // 小时
					'm+': ndate.getMinutes(), // 分
					's+': ndate.getSeconds(), // 秒
					'q+': Math.floor((ndate.getMonth() + 3) / 3), // 季度
					'S': ndate.getMilliseconds() // 毫秒
				}
				if (/(y+)/.test(type)) type = type.replace(RegExp.$1, (ndate.getFullYear() + '').substr(4 - RegExp.$1
					.length))
				for (const k in o) {
					if (new RegExp('(' + k + ')').test(type)) type = type.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[
						k]) : (('00' + o[k]).substr(('' + o[k]).length)))
				}
				return type
			},
			async getArticle() {
				this.disinfo.userid = this.userinfo.id;
				this.disinfo.article_id = this.$route.query.articleid;
				this.reply.userid = this.userinfo.id;
				this.reply.article_id = this.$route.query.articleid;
				let {
					data
				} = await this.$axios.get(
					'/blog/users/userarticledis?articleid=' + this.$route.query
					.articleid);
				// console.log(data);
				this.content = data.data.article;
				this.dis = data.data.dis.map((val, ind) => {
					if (val.userid == this.userinfo.id) {
						val.username =
							'<div style="color: #312828;font-weight: normal;display: inline-block;">作者</div>:' +
							val.username + '&nbsp;'
					}
					return val;
				});
			}
		},
		created() {
			this.getArticle();
		}
	}
</script>

<style lang="less" scoped>
	.articleinfo {
		margin: 10px;

		h1 {
			text-align: center;
		}

		.authorinfo {
			text-align: center;
			height: 30px;
			width: 900px;
			line-height: 30px;
			border-top: 1px solid;
			margin: 10px auto;

			p {
				display: inline-block;
				margin-right: 20px;

				&:nth-last-child(1) {
					margin: 0;
				}
			}
		}
	}
</style>
